<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta http-equiv="x-ua-compatible" content="ie=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="icon" href="favicon.ico" type="image/x-icon"/>
	<link rel="stylesheet" href="examples-styles.css"/>

	<title>abcjs: Basic Demo</title>
	<script src="../dist/abcjs-basic.js" type="text/javascript"></script>
	<script type="text/javascript">
		var abc = "X:1\n" +
			"T: Cooley's\n" +
			"M: 4/4\n" +
			"L: 1/8\n" +
			"R: reel\n" +
			"K: Emin\n" +
			"|:D2|EB{c}BA B2 EB|~B2 AB dBAG|FDAD BDAD|FDAD dAFD|\n" +
			"EBBA B2 EB|B2 AB defg|afe^c dBAF|DEFD E2:|\n" +
			"|:gf|eB B2 efge|eB B2 gedB|A2 FA DAFA|A2 FA defg|\n" +
			"eB B2 eBgB|eB B2 defg|afe^c dBAF|DEFD E2:|\n\n" +
			"X:2\n" +
			"T: Greensleeves\n" +
			"M: 6/8\n" +
			"L: 1/8\n" +
			"K: Ador\n" +
			"A|c2d e>fe|d2B G>AB|c2A A>GA|B2GE2|\n" +
			"A|c2d e>fe|d2B G>AB|c>BA ^G>FG|A3A2:|\n" +
			"z|g2g gfe|d2B G>AB|c2A A>GA|B6|\n" +
			"g2g gfe|d2B G>AB|c>BA ^G>FG|A3A2:|\n" +
			"A/B/|c2c cde|dBG GAB|cBA ABc|BGE E2 A/B/|\n" +
			"c2c cde|dBG GAB|cBA GE^G|A3A2:|\n" +
			"e/f/|gag gfe|dBG GBd|aba aba|gee e2e/f/|\n" +
			"gag gfe|dBG GAB|cBA GE^G|A3A2:|\n"

		function load() {
			var tuneBook = new ABCJS.TuneBook(abc)
			var select = document.getElementById("tune-selector")
			var option = document.createElement("option");
			var optionContent = document.createTextNode("-- select tune --");
			option.appendChild(optionContent);
			select.appendChild(option)
			for (var i = 0; i < tuneBook.tunes.length; i++) {
				option = document.createElement("option");
				optionContent = document.createTextNode(tuneBook.tunes[i].title);
				option.appendChild(optionContent);
				option.setAttribute('value', i)
				select.appendChild(option)
			}
			select.addEventListener("change", setTune)
		}

		function setTune() {
			var index = this.value
			ABCJS.renderAbc("paper", abc, { startingTune: index});
		}

	</script>
</head>
<body onload="load()">
<header>
	<img src="https://paulrosen.github.io/abcjs/img/abcjs_comp_extended_08.svg" alt="abcjs logo">
	<h1>Tune Selector</h1>
</header>
<div class="container">
	<p>Select the tune you want to display. The tunes are in the same input string, so this is one way to display a tune collection.</p>
	<select id="tune-selector"></select>
	<div id="paper"></div>
</div>
</body>
</html>
